<template>
	<div style="clear: both;">
		<div class="el-bg">
			<div class="float-left el-bg">
				<el-button type="text" disabled>柏特工业品网上商城</el-button>
				<el-button type="text" icon="el-icon-phone">0512-123456</el-button>
			</div>
			<div class="float-right el-bg">
				<el-button v-show='!isLogin' type="text" @click="loginFun()">登录</el-button>
				<el-button v-show='!isLogin' type="text" @click="registerFun()">免费注册</el-button>
				<el-button v-show='isLogin' type="text" @click="myinfoFun()">{{loginName}}</el-button>
				<el-button v-show='isLogin' type="text" @click="orderFun()">我的订单</el-button>
			</div>
		</div>
		<div style="height:100px;">
			<div class="float-left-3 logo-height">
				<img src="../assets/images/logo.png" style="margin-left: 15px;" />
			</div>
			<div class="float-right-7 logo-height">
				<el-input placeholder="商品搜索" v-model="searchData" class="input-with-select">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<div>
					<router-link to="/" class="el-hot">洗衣粉</router-link>
					<router-link to="/" class="el-hot">转子</router-link>
					<router-link to="/" class="el-hot">平板</router-link>
					<router-link to="/" class="el-hot">继电器</router-link>
					<router-link to="/" class="el-hot">硬盘</router-link>
				</div>
			</div>
		</div>
		<div style="margin-left:15px ;">
			<el-menu :default-active="activeIndex" mode="horizontal" id="btmune" ref="menu">
				<el-menu-item index="1" style="padding-left: 0px;padding-right: 0px;">
					<el-button type="success" style="width:200px;background-color: #008800;" @mouseenter.native="enter(0)"
					 @mouseleave.native="leave(0)"><span style="height: 100%;vertical-align: middle;line-height: 20px;">全部商品分类</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img
						 src="../assets/images/menu.png" style="vertical-align: middle;" /></el-button>
				</el-menu-item>
				<el-menu-item index="2">
					<router-link to="/">首 页</router-link>
				</el-menu-item>
				<el-menu-item index="3">
					<router-link to="/brandhouse">品 牌 商</router-link>
				</el-menu-item>
				<el-menu-item index="4">
					<router-link to="/order">商品选型</router-link>
				</el-menu-item>
				<el-menu-item index="5">
					<router-link to="/fastorder">快速下单</router-link>
				</el-menu-item>
				<el-menu-item index="6">
					<router-link to="/cart">购 物 车</router-link>
				</el-menu-item>
			</el-menu>
		</div>
		<div v-show="isMenu||isSubMenu"  @mouseenter="enter(1)" @mouseleave="leave(1)" :style="{position:menuPos,top:menuTop,left:menuLeft,zIndex:'99',width:'200px',minHeight:'500px',marginLeft:'15px',background:'rgba(0, 0, 0, 0.5)',color:'#fff'}">
			<el-popover placement="right-end" width="900" trigger="hover"
			 visible-arrow="false" v-for="menu in menuList" :key="menu.id">
				<div style="background:rgba(0, 0, 0, 0.5) ;">
					<div v-for="submenu in menu.children" :key="submenu.id">
						<div class="submenu-l2">
							<div class="icon-content">
								<img :src="submenu.banner_url" class="icon-url-2" />
								<span>{{submenu.name}}</span>
							</div>
						</div>
						<div class="submenu-l3">
							<router-link to="/" v-for="psubmenu in submenu.children" :key="psubmenu.id">{{psubmenu.name}}</router-link>
						</div>

					</div>
				</div>
				<el-button slot="reference" class="menu-btn"><img :src="menu.icon_url" class="icon-url" />&nbsp;&nbsp;&nbsp;{{menu.name}}</el-button>
			</el-popover>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				menuList: [{}],
				menuTop: 0,
				menuLeft: 0,
				menuPos: 'absolute',
				isMenu: false,
				isSubMenu: false,
				activeIndex: '1',
				searchData: '',
			};
		},
		mounted() {
			this.menuTop = this.$refs.menu.top
			this.menuLeft = this.$refs.menu.left
			this.initMenu();
		},
		computed: {
			loginName: function() {
				return this.$store.state.userInfo.username
			},
			isLogin: function() {
				return this.$store.state.userInfo.username ? true : false
			},
		},
		methods: {
			initMenu() {
				let _this = this;
				_this.menuList.pop();
				_this.$axios.post(_this.$api.CatalogAll, {}).then(function(response) {
						let categoryListL1 = response.data.categoryListL1;
						let categoryListL2 = response.data.categoryListL2;
						let categoryListL3 = response.data.categoryListL3;
						for (var i = 0; i < categoryListL2.length; i++) {
							categoryListL2[i].children = []
							for (var j = 0; j < categoryListL3.length; j++) {
								if (categoryListL2[i].id === categoryListL3[j].parent_id) {
									categoryListL2[i].children.push(categoryListL3[j])
								}
							}
						}

						for (var m = 0; m < categoryListL1.length; m++) {
							categoryListL1[m].children = []
							for (var n = 0; n < categoryListL2.length; n++) {
								if (categoryListL1[m].id === categoryListL2[n].parent_id) {
									categoryListL1[m].children.push(categoryListL2[n])
								}
							}
							_this.menuList.push(categoryListL1[m]);
						}
					})
					.catch(function(error) {
						console.log(error)
					});
			},
			enter(flg) {
				if (flg == 0) {
					this.isMenu = true;
				}

				if (flg == 1) {
					this.isSubMenu = true;
				}
			},
			leave(flg) {
				if (flg == 0) {
					this.isMenu = false;
				}

				if (flg == 1) {
					this.isSubMenu = false;
				}
			},
			loginFun() {
				this.$router.push({
					path: '/login'
				})
			},
			registerFun() {
				this.$router.push({
					path: '/register'
				})
			},
			orderFun() {
				this.$router.push({
					path: '/myorder'
				})
			},
			myinfoFun() {
				this.$router.push({
					path: '/myinfo'
				})
			}
		},
	}
</script>

<style>
	.el-hot {
		font-size: 12px;
		font-weight: 400px;
	}

	.el-bg {
		background-color: #f3f3f3;
		height: 36px;
	}

	#btmune .el-menu-item a {
		font-size: 16px;
		display: block;
	}

	#btmune {
		border-bottom: solid 3px #00AB42;
	}

	.float-left {
		float: left;
		width: 50%;
		text-align: left;
	}

	.float-right {
		float: right;
		width: 50%;
		text-align: right;
	}

	.float-left-3 {
		float: left;
		width: 40%;
		text-align: left;
	}

	.float-right-7 {
		float: right;
		width: 60%;
		text-align: left;
	}

	.input-with-select {
		margin-top: 15px;
		width: 70%;

	}

	.logo-height {
		height: 75px;
		margin-top: 15px;
	}

	.ev-img {
		height: 25px;
		vertical-align: middle;
		margin-left: 8px;
		margin-right: 3px;
	}
</style>
